<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/javascripts/build/bundle.css' />
    <link rel='stylesheet' href='/css/bootstrap.css' />
    <link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel='stylesheet' href='/stylesheets/alert.css' />
    <link rel='stylesheet' href='/stylesheets/toastr.css' />
    <link rel="stylesheet" href="/javascripts/lib/jquery-ui.css">
    <script src="/javascripts/lib/jquery-1.12.0.js"></script>
    <script src="/javascripts/lib/jquery-ui.js"></script>
    <script src="/javascripts/lib/socket.io.js"></script>
    <script src="/javascripts/lib/toastr.js"></script>
  </head>
  <body style="background:#F3F3F3;width:100%">
    <div  id="world">

    </div>
    <div id="waiting" oncontextmenu="return false"
         style="background-color: #F9F9F9;position: absolute; left: 0px; top: 0px;height: 100%;width: 100%;z-index: 99999999;text-align: center;">
      <!-- <video autoplay="1" loop="1" width="800px"  style="position: relative; top: calc(40% - 250px);"/>>
          <source src="/static/video/waiting.m4v"></source>
      </video> -->
      <img src="/res/logo_large.png" width="70px"  style="position: relative; top: calc(50% - 60px);"/>
      <img src="/res/t_large.jpg" style="position: absolute; left: calc(50% - 170px); top: calc(50% - 10px);"/>
      <i class="fa fa-gear fa-spin animated" style="position: absolute; left: calc(50% + 130px); top: calc(50% + 10px);"></i>
      <!-- <img src="/static/image/waiting.gif" style="position: relative; top: calc(40% - 100px);"/> -->
    </div>
    <div id="dialogManager"></div>

    <script src="http://127.0.0.1:9090/public/javascripts/build/index.js"></script>
    <!--<script src="/javascripts/build/index.js"></script>-->


    <script>
      (function initialize() {
        document.onreadystatechange = loadingGif;
      })();
      function removeGIF() {
        document.getElementById("waiting").remove();
      }
      function loadingGif() {
        if (document.readyState == "complete" )
        {
          removeGIF();
        }
      }
      window.loading = function(){
        var loading = '<div id="loading" oncontextmenu="return false" style="background-color:  rgba(0, 0, 0, 0.541176);position: absolute; left: 0px; top: 0px;height: 100%;width: 100%;z-index: 99999999;text-align: center;">' +
                '<img src="/res/loading.gif" style="position: relative; top: calc(40% - 33px);"/></div>';
        $("body").append(loading);
      }
      window.removeLoading = function(){
          $("#loading").remove();
      }
      //      toastr.info(null, 'test toast',{timeOut: 0})


    </script>

  </body>
<style>
  .ui-front {
    z-index: 10000;
  }
  </style>
  <script>

  </script>
</html>
